<template>
	<view class="invite_friends_warp">
		<Header leftPathType="switchTab" leftPath="/pages/mine/mine" :title="$t('mine.invite.friends.title')"/>
		<view class="invite_friends_content">
			<view class="invite_img">
				<up-image :loading="imageLoading" :src="inviteImage" width="100%" height="460" bgColor="#f1f6ff00" mode="widthFix" radius=10></up-image>
			</view>
			<view class="invite_but" @click="saveBaseImgFile(inviteImage)">
				<view class="but_comm_warp">
					<text style="margin-left: 10rpx;">{{$t('recharge.pay.save.image')}}</text>
				</view>
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import { getSharePoster,generateSharePoster } from '@/api/common.js';
	import { saveBaseImgFile } from '@/utils/index.js';
	import Header from '@/components/header_comm2.vue';
	
	export default {
		components:{Header},
		data() {
			return {
				inviteImage:null,
				imageLoading:false,
			}
		},
		mounted() {
			this.getSharePoster();
		},
		methods: {
			saveBaseImgFile,
			// 查询分享模版
			async getSharePoster(){
				this.imageLoading = true;
				const resp = await getSharePoster();
				if(resp && resp.bizcode === 100){
					const data = resp.data[0];
					// 生成分享图
					const generateResp = await generateSharePoster({id:data.id});
					if(generateResp && generateResp.bizcode === 100){
						this.inviteImage = generateResp.data;
					}
				}
				this.imageLoading = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.invite_friends_warp{
		height: calc(100vh - 80rpx);
	}
	.invite_friends_content{
		padding: 40rpx;
	}
	.invite_img{
		margin-top: 52rpx;
	}
	.invite_but{
		padding: 20rpx 50rpx;
		margin-top: 52rpx;
		.save_but{
			text-align: center;
			background: $app-bt-bj;
			border-radius: 45rpx;
			width: 100%;
			color: #FFF;
			padding: 30rpx 0;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
